
<template> 
   <div class="chat-window center">
    <div class="chat-messages">
      <news-item v-for="(item,index) in items" :cal="item.cal" :key="index" :src="item.src" :name="item.name"></news-item>
    </div>
    <div class="chat-input">
      <input type="text" v-model="sendMessage" placeholder="请输入消息..."> <button @click="send()">发送</button>
    </div>
  </div>
</template>
  
  <script>
import NewsItem from './NewsItem.vue';
  
  export default{
  components: { NewsItem },
      data() {
        return {
          items:[
          ],
          sendMessage:''
        }
      },
      methods: {
        loginList(){
          this.$axios.get("http://localhost:8081/api/vue").then(response=>{
            this.items = response.data;
          })
        },
        send(){
          if(this.sendMessage!==''){
            this.$axios.post("http://localhost:8081/api/add",{
              cal:"sent",
              src:"./assets/images/avt-02.png",
              name:this.sendMessage
            },{
              headers:{
                'Content-Type':'application/json'
              }
            }).then(response=>{
              this.items = response.data;
            })
            this.sendMessage = '';
          }
        }
      },
      created() {
        this.loginList();
      },
    }
  </script>
  
  <style>
  </style>